import React, { useState, useEffect } from "react";
import {
  NavBar,
  Cell,
  Switch,
  Area,
  ActionSheet,
  Input,
  hooks,
  Toast,
} from "react-vant";
import { useNavigate } from "react-router";
import { areaList } from "@vant/area-data";
import styles from "./index.module.css";
const Index: React.FC = () => {
  const navigate = useNavigate();
  const [visible, setVisible] = useState(false);
  const onCancel = () => setVisible(false);
  const [checked, setChecked] = useState(false);
  const [state, updateState] = hooks.useSetState({
    name: "",
    tel: "",
    city: "",
    address: "",
  });
  const hanDian = () => {
    setChecked(!checked);
  };
  const [address, setAddress] = useState<string[]>([]);
  const hanBao = () => {
    setVisible(true);
  };
  const hanZhi = () => {
    if (state.name === "") {
      Toast.info("收货人不能为空！");
      return;
    }
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (state.tel === "" || !phoneRegex.test(state.tel)) {
      Toast.info("手机号码不能为空！");
      return;
    }
    if (address.length === 0) {
      Toast.info("所在地区不能为空！");
      return;
    }
    if (state.address === "") {
      Toast.info("详细地址不能为空！");
      return;
    }
    if (checked === false) {
      Toast.info("请勾选默认地址！");
      return;
    }
    localStorage.setItem("recipientName", state.name);
    localStorage.setItem("mobilePhone", state.tel);
    localStorage.setItem("region", JSON.stringify(address));
    localStorage.setItem("detailedAddress", state.address);
    navigate("/shouhuo");
  };
  useEffect(() => {
    const handleBeforeUnload = () => {
      localStorage.removeItem("recipientName");
      localStorage.removeItem("mobilePhone");
      localStorage.removeItem("region");
      localStorage.removeItem("detailedAddress");
    };
    window.addEventListener("beforeunload", handleBeforeUnload);
    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, []);
  return (
    <div>
      <NavBar title="收货地址-添加" onClickLeft={() => navigate("/shouhuo")} />
      <div className={styles.shou}>
        <p>
          <span>收货人：</span>
          <Input
            value={state.name}
            onChange={(name) => updateState({ name })}
            placeholder="请输入姓名"
            clearable
            className={styles.input}
          />
        </p>
        <p>
          <span>手机号码：</span>
          <Input
            value={state.tel}
            onChange={(tel) => updateState({ tel })}
            placeholder="请输入手机号码"
            clearable
            className={styles.input}
          />
        </p>
        <p onClick={() => hanBao()}>
          <span>所在地区：</span>
          <Input
            value={address}
            readOnly
            onChange={(city) => updateState({ city })}
            placeholder="请选择所在地"
            className={styles.huo}
            clearable
          />
          <b className={styles.da}>&gt;</b>
        </p>
        <p>
          <span>详细地址：</span>
          <Input
            value={state.address}
            onChange={(address) => updateState({ address })}
            placeholder="街道门牌,无需重复地区信息"
            clearable
            className={styles.input}
          />
        </p>
      </div>
      {/* 按钮 */}
      <div>
        <Cell
          center
          title={
            <div>
              <h4 style={{ fontSize: "17px" }}>设为默认</h4>
              <p>每次购买时会默认使用改地址</p>
            </div>
          }
          rightIcon={<Switch size={24} onClick={() => hanDian()} />}
        />
      </div>
      {/* 地址 */}
      <div>
        <ActionSheet visible={visible} onCancel={onCancel}>
          <div style={{ padding: "16px 16px 160px" }}>
            <Area
              title="地区选择"
              areaList={areaList}
              onConfirm={(v, s) => {
                setAddress(s.map((item) => item.text));
                setVisible(false);
              }}
            />
          </div>
        </ActionSheet>
      </div>
      <div>
        <div className={styles.tian}>
          <button className={styles.btn} onClick={() => hanZhi()}>
            保存
          </button>
        </div>
      </div>
    </div>
  );
};

export default Index;
